import React from "react";
import ReactDOM from "react-dom";
// 创建虚拟DOM
// const span = React.createElement('div', null, '我是一个span')
// const div = React.createElement('div', null, span)

const msg = 'hello react'
const flag = true
const list = ['吃饭', '睡觉', '上钟']

function show() {
  if (flag) {
    return '显示'
  } else {
    return '隐藏'
  }
}
// 使用jsx创建虚拟DOM  
const App = (
  <div>
    <h1>1. 数据渲染</h1>
    {msg}
    <h1>2. 属性绑定</h1>
    <h1 title={msg}>属性绑定</h1>
    <h1>3. 条件渲染</h1>
    <h2>三元运算符</h2>
    {flag ? '显示' : '隐藏'}
    <h2>使用函数写法</h2>
    {show()}
    <h1>4. 列表渲染</h1>
    {
      list.map(item => {
        return (
          <p key={item}>
            {item}
          </p>
        )
      })
    }
  </div>
)

ReactDOM.render(App, document.getElementById("root"));
